<template>
  <div class="banner-wrapper">
      <section class="banner-one banner-carousel__one no-dots owl-theme owl-carousel">
          <div class="banner-one__slide banner-one__slide-one">
              <div class="container">
                  <div class="banner-one__bubble-1"></div><!-- /.banner-one__bubble- -->
                  <div class="banner-one__bubble-2"></div><!-- /.banner-one__bubble- -->
                  <div class="banner-one__bubble-3"></div><!-- /.banner-one__bubble- -->
                  <img src="/assets/images/slider-1-scratch.png" alt="" class="banner-one__scratch">
                  <img src="/assets/images/slider-1-person-1.png" class="banner-one__person" alt="">
                  <div class="row no-gutters">
                      <div class="col-xl-12">
                          <h3 class="banner-one__title banner-one__light-color">We Can <br>
                              Teach You</h3><!-- /.banner-one__title -->
                          <p class="banner-one__tag-line">are you ready to learn?</p><!-- /.banner-one__tag-line -->
                          <a href="#" class="thm-btn banner-one__btn">Learn More</a>
                      </div><!-- /.col-xl-12 -->
                  </div><!-- /.row -->
              </div><!-- /.container -->
          </div><!-- /.banner-one__slide -->
          <div class="banner-one__slide banner-one__slide-two">
              <div class="container">
                  <div class="banner-one__bubble-1"></div><!-- /.banner-one__bubble- -->
                  <div class="banner-one__bubble-2"></div><!-- /.banner-one__bubble- -->
                  <div class="banner-one__bubble-3"></div><!-- /.banner-one__bubble- -->
                  <img src="/assets/images/slider-1-scratch.png" alt="" class="banner-one__scratch">
                  <img src="/assets/images/slider-1-person-2.png" class="banner-one__person" alt="">
                  <div class="row no-gutters">
                      <div class="col-xl-12">
                          <h3 class="banner-one__title banner-one__light-color">We Can <br>
                              Teach You</h3><!-- /.banner-one__title -->
                          <p class="banner-one__tag-line">are you ready to learn?</p><!-- /.banner-one__tag-line -->
                          <a href="#" class="thm-btn banner-one__btn">Learn More</a>
                      </div><!-- /.col-xl-12 -->
                  </div><!-- /.row -->
              </div><!-- /.container -->
          </div><!-- /.banner-one__slide -->
      </section><!-- /.banner-one -->
      <div class="banner-carousel-btn">
          <a href="#" class="banner-carousel-btn__left-btn"><i class="kipso-icon-left-arrow"></i></a>
          <a href="#" class="banner-carousel-btn__right-btn"><i class="kipso-icon-right-arrow"></i></a>
      </div><!-- /.banner-carousel-btn -->
      <div class="banner-one__cta">
          <div class="banner-one__cta-icon">
              <i class="kipso-icon-black-graduation-cap-tool-of-university-student-for-head"></i>
              <!-- /.kipso-icon-knowledge -->
          </div><!-- /.banner-one__cta-icon -->
          <div class="banner-one__cta-title">
              <h3 class="banner-one__cta-text"><a href="#">Read how we encourage our
                      students to learn</a></h3><!-- /.banner-one__cta-text -->
          </div><!-- /.banner-one__cta-title -->
          <div class="banner-one__cta-link">
              <a href="#"><i class="kipso-icon-right-arrow"></i><!-- /.kipso-icon-right-arrow --></a>
          </div><!-- /.banner-one__cta-link -->
      </div><!-- /.banner-one__cta -->
  </div>
</template>

<script>
    export default {
        name: "BannerOne"
    }
</script>

<style scoped>

</style>
